<!DOCTYPE html>
<html>
<head>
  <script src="../node_modules/angular/angular.js"></script>
</head>
<body>
  <div ng-app="demoApp" ng-controller="demoController">
    <h3>{{ title }}</h3>
    <input type="text" ng-model="curTask">
    <button ng-click="addTask()">新增</button>
    <div ng-if="todoList.length === 0">暂无数据</div>
    <ul ng-if="todoList.length > 0">
      <li ng-repeat="item in todoList">
        <span>{{ item.content }}</span>
      </li>
    </ul>
  </div>
  <script>
    angular
      .module('demoApp', [])
      .controller('demoController', function ($scope) {
        $scope.title = 'Todo List';
        $scope.curTask = '';
        $scope.todoList = [
          { content: 'fix a bug' },
          { content: 'write a doc' }
        ];
        $scope.addTask = function () {
          if (!$scope.curTask.trim()) return;
          $scope.todoList.push({ content: $scope.curTask });
          $scope.curTask = '';
        }
      });
  </script>
</body>
</html>